const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const nodeExternals = require('webpack-node-externals')

// import { resolve } from 'path'
// import HtmlWebpackPlugin from 'html-webpack-plugin'
// import { VueLoaderPlugin } from 'vue-loader'
// import nodeExternals from 'webpack-node-externals'
module.exports = {
    target: 'web',
    externals: [
        {
            express: 'commonjs express',
            fs: 'commonjs fs',
            path: 'commonjs path',
        },
        nodeExternals()
    ],
    mode: 'production',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[hash].js',
        // clean: true //清除上一次打包的文件 
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '@views': path.resolve(__dirname, 'src/views')
        },
        // 防止某些库引入Node.js模块
        fallback: {
            "fs": false,
            "path": false,
            "os": false
        },
        extensions: ['.js', '.vue', '.json']
    },

    module: {
        rules: [
            // 处理css
            {
                test: /\.css$/, use: ['style-loader', 'css-loader'],
            },
            // 处理scss
            {
                test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            // 处理vue文件
            {
                test: /\.vue$/, use: ['vue-loader',],
            },
            // 处理js文件
            {
                test: /\.m?js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }

                }
            },

            // 处理图片
            // file-loader 负责将图片文件移动到打包目录中,这样在项目中import导入的图片文件其实拿到的内容就是图片打包之后的地址
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/,
                use: [
                    // 注释原因是说有更好的替代平，你不行呀小老弟
                    // 补充一下兄弟们是因为file-loader他是因为不关心文件的大小，大小文件都是单独打包的，意味着上线之后，每一个文件你那件都需要单独的发送http请求
                    // 所以我们用url-loader来代替file-loader
                    // 他会将图片转换为base64字符串，并且打包之后会到打包之后的main.js的文件中，这样就减少了http请求
                    // 但是这样会出现一个问题就是main.js中这个文件太大了不是太好，所以我们的思想就是大文件单独打包小文件转换为base64 的格式，
                    // 约定就是小于8kb得文件会转为banse64,否则就让他单的打包
                    // {
                    //     loader: 'file-loader',
                    //     options: {
                    //         name: '[name]-[hash:8].[ext]',
                    //     }
                    // },
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]-[hash:8].[ext]',
                            esModule: false,
                            limit: 8 * 1024, // 8kb
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './public/index.html'
        }),
        new VueLoaderPlugin(),
    ],

}